<script setup lang="ts">
const props: any = defineProps<{
    ujt: any;
    opt: any;
}>();

const { $fn, $global } = props.ujt;
</script>

<template>
    <h1>📚 {{ $fn.lg(props.opt.channel + '.ui.class') }}</h1>
    <div class="kdd-class-area">
        <ChannelClass :ujt="ujt" :opt="opt">
            <template #default="{ item, opt }">
                <div
                    :title="item[1] || ''"
                    :class="{
                        fl: true,
                        cur:
                            item[0] === $global.location.query?.fl ||
                            (item[0] === 'asai' && !$global.location.query?.fl),
                    }"
                    @pointerdown="
                        opt.setChannelClass(item[0] === 'asai' ? '' : item[0])
                    "
                >
                    {{ item[1] }}
                </div>
            </template>
        </ChannelClass>
    </div>
</template>

<style scoped lang="scss">
h1 {
    font-size: var(--fs2);
}
.kdd-class-area {
    padding: 0 12px 12px 0;
    background-color: var(--cm0);
    text-align: center;
    .fl {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 158px;
        height: 158px;
        margin: 12px 0 0 12px;
        border: 1px solid var(--ch4);
        border-radius: var(--radius);
    }
}
</style>
